Skip to main content

Formateador de código

¿Qué es?​

Un formateador de código es una herramienta que ayuda a mantener una estructura y estilo de código consistente en todos los proyectos. Esto asegura que el código sea fácil de leer y mantener, y que cumpla con las convenciones de estilo establecidas por el equipo de desarrollo.

Proyectos​

Todos los proyectos realizados deben contener el archivo de configuración del formateador de código para asegurar que todos los proyectos sigan la misma estructura.

En la raíz del proyecto, se debe crear la carpeta .vscode y dentro un archivo settings.json.

Estructura:

.vscode > settings.json

El contenido del archivo es el siguiente:

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 4,
    "editor.insertSpaces": false,
    "editor.detectIndentation": true,
    "editor.formatOnSave": true,
    "prettier.useTabs": true,
    "prettier.tabWidth": 4,
    "prettier.printWidth": 150,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "workbench.colorCustomizations": {
        // "activityBar.activeBackground": "#b300b3"
        // "activityBar.activeBorder": "#9f9f00"
        "activityBar.background": "#3d0036"
        // "activityBar.foreground": "#e7e7e7",
        // "activityBar.inactiveForeground": "#e7e7e799",
        // "activityBarBadge.background": "#9f9f00",
        // "activityBarBadge.foreground": "#15202b",
        // "sash.hoverBorder": "#b300b3",
        // "statusBar.background": "#800080",
        // "statusBar.foreground": "#e7e7e7",
        // "statusBarItem.hoverBackground": "#b300b3",
        // "statusBarItem.remoteBackground": "#800080",
        // "statusBarItem.remoteForeground": "#e7e7e7",
        // "titleBar.activeBackground": "#800080",
        // "titleBar.activeForeground": "#e7e7e7",
        // "titleBar.inactiveBackground": "#80008099",
        // "titleBar.inactiveForeground": "#e7e7e799"
    },
    "peacock.color": "purple"
}

Este archivo de configuración utiliza Prettier como el formateador de código predeterminado y define varias opciones de estilo, como el uso de tabulaciones en lugar de espacios y un ancho de tabulación de 4 espacios. También incluye algunas personalizaciones de colores para el entorno de trabajo de Visual Studio Code.

Explicación de las configuraciones​

  • editor.defaultFormatter: Especifica el formateador de código predeterminado. En este caso, se utiliza Prettier.
  • editor.tabSize: Define el tamaño de las tabulaciones.
  • editor.insertSpaces: Indica si se deben usar espacios en lugar de tabulaciones.
  • editor.detectIndentation: Permite a Visual Studio Code detectar automáticamente la configuración de sangría del archivo.
  • editor.formatOnSave: Formatea automáticamente el archivo al guardarlo.
  • prettier.useTabs: Indica a Prettier que utilice tabulaciones en lugar de espacios.
  • prettier.tabWidth: Define el ancho de las tabulaciones para Prettier.
  • prettier.printWidth: Define el ancho máximo de línea para Prettier.
  • [html]: Configuración específica para archivos HTML.
  • workbench.colorCustomizations: Personalizaciones de colores para el entorno de trabajo.

Esta configuración ayudará a mantener un estilo de código consistente y facilitará la colaboración entre los miembros del equipo.